<!DOCTYPE html>
<html style="width:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>提交订单</title>
    <link rel="stylesheet" href="../../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <style>
        header{
          padding: 1.6rem 0.8rem 0.5rem 0.8rem;
          position: fixed;
          width: 100%;
          background-color: #fff;
          z-index: 98;
          border-bottom: 1px solid #ccc;
          background: #D59B4F;
          color:#FFF;
        }
        header span:nth-of-type(1){
          font-size: 1rem;
        }
        header span:nth-of-type(2){
          font-size: 1rem
        }
        .require{
          color:#ff0000;
          padding: 0 2px;
          display: inline-block;
        }
        .info_box{
          padding-top: 4rem;
        }
        .info_list{
          border-bottom:10px solid #F5F5F5;

        }
        .list_items{
          padding: .5rem;
          display: flex;
          align-items: center;
        }
        .list_items label{
          display: inline-block;
          min-width: 4rem;
        }
        #current_room{
          color:#D59B4F;
          font-size: 1.2rem;
        }
        .numicon{
          font-size: 1rem;
          display: inline-block;
          border-radius: 50%;
          border: 1px solid #EEE;
          text-align: center;
          line-height:1.3rem;
          width: 1.5rem;
          height: 1.5rem;
        }
        .iconplus{
          color:#D59B4F;
          border-color: #D59B4F;
        }
        .change_time{
          padding: 10px 5px !important;
        }

        /*底部提交*/
        .submit-btn .tips{
          display: inline-block;
          color:#D59B4F;
          border-radius: 50%;
          width: 1rem;
          height: 1rem;
          text-align: center;
          border:1px #D59B4F solid;
        }
        .submit-btn{
          position: absolute;
          bottom: 0;
          width: 100%;
        }
        .submit-btn>div{
          padding:.5rem 0 .5rem .5rem;
        }
        #commit{
          background: #D59B4F;
          color:#FFF;
          padding: .6rem 1.5rem;
          float: right;
        }
        .totalprice{
          color:#D59B4F;
          font-size: 1rem;
        }
    </style>
</head>

<body style="background-color:rgb(255, 255, 255);color:rgb(57, 57, 57);margin:0;padding:0;width:100%;">
  <header>
    <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
    <span class="toptitle"></span>
  </header>
  <div class="info_box">
      <div class="info_list">
            <div class="list_items">
              <label>房间数:</label>
              <p><span id="current_room">1</span>&nbsp;间</p>
              <div style="margin-left:2rem;">
                <span class="numicon minnums">-</span>
                <input class="CartNum" readonly style="width:2rem;text-align:center;" type="num" value="1" name="roomnum" />
                <span class="numicon iconplus addnums">+</span>
              </div>
            </div>

            <div class="list_items">
              <label><a class="require">*</a>入住人:</label>
              <div><input type="text" value="" name="name" placeholder="填写您的姓名" /></div>
            </div>

            <div class="list_items">
              <label><a class="require">*</a>手机号:</label>
              <div><input type="number" value="" name="mobile" placeholder="填写您的联系方式" /></div>
            </div>

            <!-- <div class="list_items">
              <label><a class="require">*</a>入住时间:</label>
              <div onclick="enter_time();"><input style="padding:0 5px;" readonly type="text" value="" name="enter_time" placeholder="选择入住时间" /></div>
            </div>

            <div class="list_items">
              <label><a class="require">*</a>退房时间:</label>
              <div onclick="leave_time();"><input  style="padding:0 5px;" readonly type="text" value="" name="leave_time" placeholder="选择退房时间" /></div>
            </div> -->

            <div class="list_items">
              <label><a class="require">*</a>入住时间:</label>
              <div><input class="change_time"  type="date"  name="enter_time"/></div>
            </div>

            <div class="list_items">
              <label><a class="require">*</a>退房时间:</label>
              <div><input class="change_time"  type="date" name="leave_time" /></div>
            </div>
      </div>

      <!-- 底部提交 -->
      <div class="submit-btn">
        <div>
          <p><span class="tips">!</span>&nbsp;&nbsp;该订单确认后不予退，请仔细填写</p>
        </div>
        <div>
          <!-- <span style="color:#D59B4F;">&yen;&nbsp;&nbsp;<label class="totalprice" for="total">999</label></span> -->
          <span id="commit">提交订单</span>
        </div>
      </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../../script/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script>
    apiready = function() {
      var order_title = api.pageParam.ordertitle;
      $('.toptitle').html(order_title);
    }
</script>

<script>
  var toast = new auiToast({});
  //时间选择
  var myDate = new Date;
  var current_mouth = myDate.getMonth()+1;
  var current_day  = myDate.getDate();
  if(current_mouth<10){
    current_mouth = '0'+current_mouth;
  }
  if(current_day<10){
    current_day = '0'+current_day;
  }
  var current_date = myDate.getFullYear() + '-' + current_mouth + '-' + current_day;
  var the_secoend_date = myDate.getFullYear() + '-' + current_mouth + '-' + (current_day);
  $("input[name='enter_time']").val(current_date);
  $("input[name='leave_time']").val(the_secoend_date);

  //入住时间
  function enter_time () {
        var UIDatePickerTool = api.require('UIDatePickerTool');
        UIDatePickerTool.open({
           rowHeight:40,
            styles: {
                   bg: 'rgba(0,0,0,0)',
                   headerViewBackgroundColor:'rgba(0,0,0,0)',
                   lineBackgroundColor: 'rgba(0,0,0,0)',
            item:{
                 normal: '#f00',
                normalFont: 14,
                 selected: '#000079',
                 cancelBtn:{
                     cancelButtonTextColor: '#1E1E1E',
                     cancelButtonText: '取消' ,
                     cancelButtonFont:17
                 },
                 confirmBtn:{
                     confirmButtonTextColor: '#1E1E1E',
                     confirmButtonText: '确定' ,
                     confirmButtonFont:17
                  },
            }
            },
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
                if(ret.eventType == 'submit'){
                  var time_val = ret.year + '-' + ret.month + '-' + ret.day;
                  $("input[name='enter_time']").val(time_val);
                }

            } else {
                  console.log(JSON.stringify(err));
            }
        });
  };

  //退房时间
  function leave_time() {
    var UIDatePickerTool = api.require('UIDatePickerTool');
    UIDatePickerTool.open({
       rowHeight:40,
        styles: {
               bg: 'rgba(0,0,0,0)',
               headerViewBackgroundColor:'rgba(0,0,0,0)',
               lineBackgroundColor: 'rgba(0,0,0,0)',
        item:{
             normal: '#f00',
            normalFont: 14,
             selected: '#000079',
             cancelBtn:{
                 cancelButtonTextColor: '#1E1E1E',
                 cancelButtonText: '取消' ,
                 cancelButtonFont:17
             },
             confirmBtn:{
                 confirmButtonTextColor: '#1E1E1E',
                 confirmButtonText: '确定' ,
                 confirmButtonFont:17
              },
        }
        },
    }, function(ret, err) {
        if (ret) {
            console.log(JSON.stringify(ret));
            if(ret.eventType == 'submit'){
              var time_val = ret.year + '-' + ret.month + '-' + ret.day;
              $("input[name='leave_time']").val(time_val);
            }

        } else {
              console.log(JSON.stringify(err));
        }
    });
  }

  //加
$('.addnums').click(function () {
      var currentVal = $(this).siblings(".CartNum").val();
      currentVal++;
      $(this).siblings(".CartNum").attr('value',currentVal);
      $(this).siblings(".CartNum").val(currentVal);
      $('#current_room').html(currentVal);
  });

//减
  $('.minnums').click(function () {
      var currentVal = $(this).siblings(".CartNum").val();
      if(currentVal == 1){
        api.toast({
            msg: '至少选择一间',
            duration: 2000,
            location: 'middle'
        });
          return;
  }
      currentVal--;
      $(this).siblings(".CartNum").attr('value',currentVal);
      $(this).siblings(".CartNum").val(currentVal);
      $('#current_room').html(currentVal);
  });

  //提交订单
  $("#commit").click(function(){
    if($("input[name='name']").val() == '' || $("input[name='mobile']").val() == '' || $("input[name='enter_time']").val() == '' || $("input[name='leave_time']").val() == ''){
      api.toast({
          msg: '带 * 为必填项',
          duration: 2000,
          location: 'bottom'
      });
        return;
    }
    var dataList = {
      'hotelid':api.pageParam.orderid,
      'num':$('#current_room').html(),
      'name':$("input[name='name']").val(),
      'mobile':$("input[name='mobile']").val(),
      'start_time':$("input[name='enter_time']").val(),
      'end_time':$("input[name='leave_time']").val()
    };
    $.ajax({
        url: dns + 'hotelorder/add',
        type: 'POST',
        dataType: 'json',
        data:dataList,
        beforeSend: function(request) {
            request.setRequestHeader("token", localStorage.getItem('token'));
        },
        success: function(res) {
          console.log(JSON.stringify(res));
          if(res.status == 1){
            api.toast({
                msg: res.msg,
                duration: 2000,
                location: 'bottom'
            });
              setTimeout(function(){
                toast.loading({
                    title:"跳转中...",
                    duration:2000
                },function(ret){
                    setTimeout(function(){
                        toast.hide();
                        api.openWin({
                            name: 'pay',
                            url: 'pay.html',
                            allowEdit:true,
                            pageParam: {
                              'payid':res.id,
                              'paytitle':api.pageParam.ordertitle
                            },
                        });
                    }, 3000)
                });
              },2000);
          }else{
              api.toast({
                  msg: res.msg,
                  duration: 2000,
                  location: 'bottom'
              });
          }
        },
        error: function(err) {
            api.toast({
                msg: JSON.parse(err.responseText).msg,
                duration: 2000,
                location: 'bottom' //'bottom'
            });
            return;
        }
    });
  });
</script>
